@charset "UTF-8";
@-webkit-keyframes growIn {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes growIn {
  0% {
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}
.animated--grow-in {
  -webkit-animation-name: growIn;
  animation-name: growIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: transform cubic-bezier(0.18, 1.25, 0.4, 1), opacity cubic-bezier(0, 1, 0.4, 1);
}

@-webkit-keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.animated--fade-in {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
  -webkit-animation-duration: 200ms;
  animation-duration: 200ms;
  -webkit-animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
  animation-timing-function: opacity cubic-bezier(0, 1, 0.4, 1);
}

/*左右摇摆动画
<div class="animated--swing-run">
    <img src="9.jpg" />
</div>
*/
@-webkit-keyframes swingRun {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes swingRun {
  15% {
    -webkit-transform: translateX(5px);
    transform: translateX(5px);
  }
  30% {
    -webkit-transform: translateX(-5px);
    transform: translateX(-5px);
  }
  50% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  65% {
    -webkit-transform: translateX(-3px);
    transform: translateX(-3px);
  }
  80% {
    -webkit-transform: translateX(2px);
    transform: translateX(2px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.animated--swing-run {
  position: relative;
  overflow: hidden;
  z-index: 5;
  cursor: pointer;
}

.animated--swing-run:hover {
  -webkit-animation: swingRun 1s ease;
  animation: swingRun 1s ease;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

/*
字体下划线
*/
.animated--text-decoration {
  background-image: linear-gradient(rgba(0, 0, 0, 0) calc(99% - 1px), #FE4F70 1px);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  -webkit-transition: background-size 0.5s;
  transition: background-size 0.5s;
}

.animated--text-decoration:hover {
  text-decoration: none;
  background-size: 100% 100%;
}

.bg-gradient-primary {
  background-color: #4e73df;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #4e73df), to(#224abe));
  background-image: linear-gradient(180deg, #4e73df 10%, #224abe 100%);
  background-size: cover;
}

.bg-gradient-secondary {
  background-color: #6c757d;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #6c757d), to(#494f54));
  background-image: linear-gradient(180deg, #6c757d 10%, #494f54 100%);
  background-size: cover;
}

.bg-gradient-success {
  background-color: #1cc88a;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #1cc88a), to(#13855c));
  background-image: linear-gradient(180deg, #1cc88a 10%, #13855c 100%);
  background-size: cover;
}

.bg-gradient-info {
  background-color: #36b9cc;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #36b9cc), to(#258391));
  background-image: linear-gradient(180deg, #36b9cc 10%, #258391 100%);
  background-size: cover;
}

.bg-gradient-warning {
  background-color: #f6c23e;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #f6c23e), to(#dda20a));
  background-image: linear-gradient(180deg, #f6c23e 10%, #dda20a 100%);
  background-size: cover;
}

.bg-gradient-danger {
  background-color: #e74a3b;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #e74a3b), to(#be2617));
  background-image: linear-gradient(180deg, #e74a3b 10%, #be2617 100%);
  background-size: cover;
}

.bg-gradient-light {
  background-color: #f8f9fa;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #f8f9fa), to(#cbd3da));
  background-image: linear-gradient(180deg, #f8f9fa 10%, #cbd3da 100%);
  background-size: cover;
}

.bg-gradient-dark {
  background-color: #212529;
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #212529), to(black));
  background-image: linear-gradient(180deg, #212529 10%, black 100%);
  background-size: cover;
}

.bg-gray-100 {
  background-color: #f8f9fa !important;
}

.bg-gray-200 {
  background-color: #e9ecef !important;
}

.bg-gray-300 {
  background-color: #dee2e6 !important;
}

.bg-gray-400 {
  background-color: #ced4da !important;
}

.bg-gray-500 {
  background-color: #adb5bd !important;
}

.bg-gray-600 {
  background-color: #6c757d !important;
}

.bg-gray-700 {
  background-color: #495057 !important;
}

.bg-gray-800 {
  background-color: #343a40 !important;
}

.bg-gray-900 {
  background-color: #212529 !important;
}

.o-hidden {
  overflow: hidden !important;
}

.text-xs {
  font-size: 0.7rem;
}

.text-lg {
  font-size: 1.2rem;
}

.text-gray-100 {
  color: #f8f9fa !important;
}

.text-gray-200 {
  color: #e9ecef !important;
}

.text-gray-300 {
  color: #dee2e6 !important;
}

.text-gray-400 {
  color: #ced4da !important;
}

.text-gray-500 {
  color: #adb5bd !important;
}

.text-gray-600 {
  color: #6c757d !important;
}

.text-gray-700 {
  color: #495057 !important;
}

.text-gray-800 {
  color: #343a40 !important;
}

.text-gray-900 {
  color: #212529 !important;
}

.icon-circle {
  height: 2.5rem;
  width: 2.5rem;
  border-radius: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*
字体超出省略号代替...
*/
.text-overflow {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
}

.text-overflow-2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-overflow-3 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
}

.border-left-primary {
  border-left: 0.25rem solid #4e73df !important;
}

.border-bottom-primary {
  border-bottom: 0.25rem solid #4e73df !important;
}

.border-left-secondary {
  border-left: 0.25rem solid #6c757d !important;
}

.border-bottom-secondary {
  border-bottom: 0.25rem solid #6c757d !important;
}

.border-left-success {
  border-left: 0.25rem solid #1cc88a !important;
}

.border-bottom-success {
  border-bottom: 0.25rem solid #1cc88a !important;
}

.border-left-info {
  border-left: 0.25rem solid #36b9cc !important;
}

.border-bottom-info {
  border-bottom: 0.25rem solid #36b9cc !important;
}

.border-left-warning {
  border-left: 0.25rem solid #f6c23e !important;
}

.border-bottom-warning {
  border-bottom: 0.25rem solid #f6c23e !important;
}

.border-left-danger {
  border-left: 0.25rem solid #e74a3b !important;
}

.border-bottom-danger {
  border-bottom: 0.25rem solid #e74a3b !important;
}

.border-left-light {
  border-left: 0.25rem solid #f8f9fa !important;
}

.border-bottom-light {
  border-bottom: 0.25rem solid #f8f9fa !important;
}

.border-left-dark {
  border-left: 0.25rem solid #212529 !important;
}

.border-bottom-dark {
  border-bottom: 0.25rem solid #212529 !important;
}

.progress-sm {
  height: 0.5rem;
}

.rotate-15 {
  -webkit-transform: rotate(15deg);
  transform: rotate(15deg);
}

.rotate-n-15 {
  -webkit-transform: rotate(-15deg);
  transform: rotate(-15deg);
}

/*图片水平垂直居中 
<div class="piccentre">
    <img src="1.jpg"/>
</div>
*/
.piccentre {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.piccentre > img {
  min-width: 100%;
  min-height: 100%;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/*鼠标悬浮颜色变深
<div class="hoverdarken">
    <a class="darken" href="#">
        <img src="news-11.jpg">
    </a>
</div>
*/
.hoverdarken .darken {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}

.hoverdarken .message {
  position: absolute;
  top: 0;
  left: 0;
  color: white;
  width: 100%;
  height: 100%;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.hoverdarken .message .title {
  position: absolute;
  bottom: 20px;
  text-align: center;
  width: 100%;
  color: #fff;
}

.hoverdarken .darken::after,
.hoverdarken .darkenline::after {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  display: block;
  height: 100%;
  width: 100%;
}

.hoverdarken .darken::after {
  opacity: 0.35;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(#000));
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.5), #000);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.hoverdarken:hover .darken::after,
.hoverdarken.active .darken::after {
  opacity: 0.55;
}

.hoverdarken .darkenline::after {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)), to(rgba(0, 0, 0, 0.75)));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75));
}

/*鼠标悬浮图片放大
<div class="hoverthumb or hoverthumbvert">
    <img src="" alt="">
</div>
*/
.hoverthumb, .hoverthumbvert {
  display: block;
  position: relative;
  overflow: hidden;
}

.hoverthumb img,
.hoverthumbvert img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

.hoverthumb img {
  height: 100%;
}

.hoverthumbvert img {
  width: 100%;
}

.hoverthumbvert:hover img,
.hoverthumbvert.active img {
  width: 120% !important;
}

.hoverthumb:hover img,
.hoverthumb.active img {
  height: 120% !important;
}

/*图片拉伸
 *图片水平拉伸(高100%)
<div class="picthumb">
    <img src="" alt="">
</div>
 *图片垂直拉伸(宽100%)
<div class="picthumbvert">
    <img src="" alt="">
</div>

*/
.picthumb, .picthumbvert {
  display: block;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}

.picthumb img, .picthumbvert img {
  position: absolute;
}

.picthumb img {
  height: 100%;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
}

.picthumbvert img {
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/*自适应正方形容器
<div class="squarewrap">
    <div class="square">
        content...
    </div>
</div>
*/
.squarewrap {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  position: relative;
}

.squarewrap .square {
  width: 100%;
  height: 100%;
  position: absolute;
}

/*视频中心按钮
<a class="videothumb" href="#">
  <div class="picthumb rounded-5 overflow-hidden">
      <img src="assets/img/news-1.jpg" alt="">

      <div class="videobutton">
          <div class="videobuttontwo">
              <div class="videoplay">
                  <span class="videoplayicon"></span>
              </div>
          </div>
      </div>
  </div>
</a>
*/
.videothumb {
  -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  width: 100%;
  height: 100%;
}

.videothumb .videobutton {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

.videothumb .videobutton .videobuttontwo {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.videothumb .videobutton .videobuttontwo .videoplay,
.videothumb .videobutton .videobuttontwo .videoplaysm {
  background: -webkit-gradient(linear, left bottom, left top, from(#FFA387), to(#ffc4a0));
  background: linear-gradient(to top, #FFA387 0%, #ffc4a0 100%);
  border: 3px solid #fff;
  border-radius: 50%;
  -webkit-transition: all 1s cubic-bezier(0, 0, 0.2, 1) !important;
  transition: all 1s cubic-bezier(0, 0, 0.2, 1) !important;
  -webkit-box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07);
  box-shadow: 0 20px 30px rgba(0, 0, 0, 0.07);
}

.videothumb .videobutton .videobuttontwo .videoplay {
  width: 78px;
  height: 78px;
}

.videothumb .videobutton .videobuttontwo .videoplaysm {
  width: 58px;
  height: 58px;
}

.videothumb .videobutton .videobuttontwo .videoplayicon {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  line-height: 1;
  margin-left: 1px;
}

.videothumb .videobutton .videobuttontwo .videoplayicon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  border-left: 17px solid #fff;
  border-top-width: 12px;
  border-bottom-width: 12px;
  border-left-width: 19px;
  border-left-color: #ffffff;
}

.videothumb:hover .videoplay,
.videothumb:hover .videoplaysm {
  -webkit-transform: scale3d(1.15, 1.15, 1.15);
  transform: scale3d(1.15, 1.15, 1.15);
}

/*鼠标悬浮显示文字
<a href="#" class="hoverinner">
    <img src="1.png" alt="">
    <div class="inner">
      <h3 class="">Business</h3>
    </div>
</a>
*/
.hoverinner {
  position: relative;
}

.hoverinner .inner {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  width: 100%;
  padding: 10px 30px;
  color: #fff;
  z-index: 1;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hoverinner:hover .inner,
.hoverinner.active .inner {
  opacity: 1;
  visibility: visible;
}

.hoverinner::after {
  position: absolute;
  height: 100%;
  width: 100%;
  content: "";
  left: 0;
  top: 0;
  background-color: rgba(0, 0, 0, 0.7);
  opacity: 0.3;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.hoverinner:hover::after,
.hoverinner.active::after {
  opacity: 1;
}

/*post 格式
<a href="#" class="hoverformat">
    <img src="1.png" alt="">
    <span class="format">
        <i class="bi bi-camera-video"></i>
    </span>
</a>
*/
.hoverformat .format {
  position: absolute;
  left: 25px;
  top: 25px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  opacity: 0.5;
  -webkit-transition: all 0.7s ease-in-out;
  transition: all 0.7s ease-in-out;
  color: #fff;
  font-size: 24px;
  z-index: 1;
}

.hoverformat:hover .format {
  opacity: 0.8;
}

/*default*/
::-moz-selection {
  color: #FFF;
  background: #FE4F70;
}
::selection {
  color: #FFF;
  background: #FE4F70;
}

html {
  height: 100vh;
}
html body {
  min-height: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
html body > .middle {
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
}
html body ul, html body ol, html body dl {
  list-style: none;
  margin: 0;
  padding: 0;
}
html body a {
  color: inherit;
  line-height: inherit;
  display: inline-block;
  text-decoration: none;
}
html body a:hover {
  color: #FE4F70;
}
html body a, html body button, html body img, html body input {
  -webkit-transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
  transition: all 0.7s cubic-bezier(0.645, 0.045, 0.355, 1);
}

/*common*/
/*输入框圆角*/
.border-radius-input {
  border-radius: calc((1.5em + 0.75rem + 2px) / 2);
}

.border-radius-input-sm {
  border-radius: calc((1.5em + 0.5rem + 2px) / 2);
}

.border-radius-input-lg {
  border-radius: calc((1.5em + 1rem + 2px) / 2);
}

/*圆角*/
.rounded-4 {
  border-radius: 0.4rem;
}

.rounded-5 {
  border-radius: 0.5rem;
}

/*字体大小*/
.fs-12 {
  font-size: 0.75rem;
}

.fs-13 {
  font-size: 0.8125rem;
}

.fs-14 {
  font-size: 0.875rem;
}

/*容器宽度*/
@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
    max-width: 1140px;
  }
}
/*pagination*/
.dev-pagination > li {
  margin: 0 5px;
}

.dev-pagination .page-item .page-link {
  color: #212529;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 50% !important;
}

.dev-pagination .page-item:hover .page-link {
  color: #212529;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.dev-pagination .page-item.active .page-link {
  color: #fff;
  background-color: #333;
  border-color: #333;
}

/*滑动按钮*/
.arrows-btn {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
}

.arrows-btn [class*=arrows-button-] {
  color: #424040;
  font-size: 0.8125rem;
  margin: 5px;
  padding: 6px 14px !important;
  background: #D6D6D6;
  display: inline-block;
  cursor: pointer;
  border-radius: 3px;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  border: none;
}

.arrows-btn [class*=arrows-button-]:hover {
  background: #424040;
  color: #FFF;
}

/*公告*/
.newsticker-item {
  line-height: 26px;
}

/*分类*/
.main-category-area {
  height: 530px;
  margin-bottom: 30px;
  overflow: hidden;
}

.main-category-area .bi {
  font-size: 26px;
  height: 36px;
  width: 36px;
  background-color: #ffc4a0;
  line-height: 36px;
  text-align: center;
  border-radius: 50000px;
}

@media (max-width: 767.98px) and (min-width: 275.98px) {
  .main-category-item {
    width: calc((100% - 30px) / 2);
  }
}
.main-category-thumb {
  width: 100%;
  height: 100%;
}

/*轮播*/
.main-slider-area {
  margin-bottom: 30px;
  position: relative;
}

.main-slider-thumb {
  height: 530px;
}

.flow-arrow {
  width: 35px;
  height: 35px;
  display: block;
  background-position: center;
  background-size: contain;
  opacity: 0.5;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.flow-arrow:hover {
  opacity: 1;
  -webkit-transition-duration: 0.2s;
  transition-duration: 0.2s;
}

.flow-arrow-up {
  background-image: url(../img/arrow-up-circle.svg);
  margin-bottom: 15px;
}

.flow-arrow-down {
  background-image: url(../img/arrow-down-circle.svg);
}

.main-slide-arrow {
  position: absolute;
  right: 12px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.main-right-thumb {
  height: 250px;
  margin-bottom: 30px;
}

/*文章*/
.blog-item {
  margin-bottom: 1.5rem;
}

.blog-thumb {
  height: 250px;
  max-width: 450px;
  margin-bottom: 0.5rem;
}

/*小部件r*/
@media (min-width: 992px) {
  .widget-area {
    padding-left: 30px;
  }
}
.widget-area .widget-header h5 {
  border-bottom: 2px solid #eaecee;
  padding-bottom: 10px;
  position: relative;
}

.widget-area .widget-header h5::after {
  content: "";
  width: 55px;
  height: 2px;
  position: absolute;
  background: #000;
  bottom: -2px;
  left: 0;
}

/*话题矩阵*/
.widget-area .topic {
  width: 30%;
}

@media (min-width: 768px) and (max-width: 992px) {
  .widget-area .topic {
    width: 22%;
  }
}
/*最新*/
@media (max-width: 991px) and (min-width: 768px) {
  .latest-post-item {
    width: 50%;
    padding-right: 15px;
  }

  .latest-post-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}
.latest-post-item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin-bottom: 20px;
}

.latest-post-thumb {
  -ms-flex-preferred-size: 0 0 auto;
  flex-basis: 0 0 auto;
  min-width: 84px;
  margin-right: 20px;
}

/*标签*/
.tags-item {
  color: #8F9BAD;
  border: solid 1px #EBEBEB;
  border-radius: 25px;
  font-size: 14px;
  display: inline-block;
  padding: 3px 14px;
  margin: 5px 0;
}

.tags-item:hover,
.tags-item:focus {
  border-color: #FE4F70;
  color: #FE4F70;
}

/*详情*/
.blog-meta a {
  display: inline;
}

.blog-meta .blog-meta-top {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.blog-meta .blog-meta-category {
  margin-right: 25px;
}

.blog-meta .blog-meta-category .categorie {
  background-color: #fee86d;
  color: #222222;
  padding: 3px 15px 3px 14px;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  margin: auto;
  text-align: center;
  font-size: 13px;
  border-radius: 20px;
  font-weight: 400;
  text-transform: capitalize;
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
}

.blog-meta .blog-meta-category .categorie:hover {
  background-color: #2b2b2b;
  color: #ffffff;
}

.blog-meta .blog-meta-category .categorie i {
  color: #222222;
  margin-right: 5px;
  margin-top: 0px;
  font-size: 12px;
  font-weight: 400;
}

.blog-meta .blog-meta-category .categorie:hover i {
  color: #ffffff;
}

.blog-meta .blog-meta-title {
  line-height: 1.4;
}

.blog-meta .blog-meta-short {
  color: #555;
}

.blog-meta .blog-meta-bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #666;
}

.blog-meta .blog-meta-bottom-left span {
  position: relative;
  padding-right: 10px;
  margin-right: 10px;
}

.blog-meta .blog-meta-bottom-left span:nth-child(2)::before {
  position: absolute;
  content: "";
  left: -12px;
  top: 50%;
  height: 4px;
  width: 4px;
  background: #adb5bd;
  border-radius: 50000px;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.blog-meta .blog-meta-bottom-right a {
  margin-right: 8px;
}

.blog-meta-author img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  margin-right: 5px;
}

.blog-meta-author .blog-meta-author-by,
.blog-meta-author .blog-meta-author-at {
  color: #9b9ea1;
}

/*视频*/
.follow-item {
  margin-bottom: 25px;
}

.follow-thumb {
  padding-bottom: 70%;
}

/*返回顶部*/
.scroll-to-top {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  text-align: center;
  color: #fff;
  background: rgba(52, 58, 64, 0.5);
  line-height: 46px;
}

.scroll-to-top:focus,
.scroll-to-top:hover {
  color: white;
}

.scroll-to-top:hover {
  background: #343a40;
}

.scroll-to-top i {
  font-weight: 800;
}

/*picture*/
.waterfall-item {
  width: 270px;
  text-align: center;
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}

.waterfall-item img {
  width: 100%;
}

.login-body {
  position: relative;
}

/*logo*/
.login-body .website-logo {
  position: absolute;
  top: 70px;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 1000;
}

/*form*/
.login-body .login-form {
  position: absolute;
  width: 100%;
  height: 100%;
}

.login-body .img-holder {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  padding: 60px;
  text-align: center;
  overflow: hidden;
  z-index: 0;
}

.img-holder .bg {
  position: absolute;
  opacity: 0.23;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url(../img/img1.jpg);
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.img-holder .info-holder {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.login-body .img-holder .info-holder img {
  display: none;
  max-width: 534px;
  -webkit-animation: zoom-in-img 50s linear 0s infinite;
  animation: zoom-in-img 50s linear 0s infinite;
  -webkit-transform-origin: center center;
  transform-origin: center center;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.img-holder .info-holder img {
  width: 100%;
  max-width: 378px;
}

/*form*/
.login-body .form-holder {
  width: 100%;
  height: 100%;
}

.login-body .form-content {
  min-height: 100%;
  background-color: transparent;
  padding: 125px 60px 60px;
  -webkit-perspective: 800px;
  perspective: 800px;
  text-align: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.login-body .form-content .form-items {
  display: inline-block;
  width: 100%;
  max-width: 340px;
  padding: 35px 30px;
  border-radius: 10px;
  background-color: #fff;
  -webkit-box-shadow: 0 6px 15px rgba(0, 0, 0, 0.16);
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.16);
  text-align: left;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

/*input*/
.form-content input,
.form-content .dropdown-toggle.btn-default {
  border-radius: 6px;
  font-size: 15px;
  font-weight: 300;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  margin-bottom: 14px;
  border: 0;
}

/*button*/
.login-body .form-content .form-button .ibtn {
  background-color: #29A4FF;
  color: #fff;
  border-radius: 6px;
  border: 0;
  padding: 6px 28px;
  font-size: 14px;
  font-weight: 700;
  margin-right: 10px;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0.16);
}

.login-body .form-content .form-button .ibtn:hover {
  -webkit-box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
  box-shadow: 0 5px 6px rgba(0, 0, 0, 0.16);
}

/*other*/
.login-body .form-content .form-items .other-links {
  margin-top: 38px;
  margin-bottom: 30px;
}

.login-body .form-content .form-items .other-links .text {
  font-size: 13px;
  font-weight: 300;
  color: #666;
  margin-bottom: 15px;
}

.login-body .form-content .form-items .other-links a {
  font-size: 12px;
  font-weight: 500;
  margin-right: 5px;
  display: inline-block;
  padding: 5px;
  border-radius: 2px;
  background-color: #F7F7F7;
}

.form-content .other-links a i {
  width: 18px;
  height: 18px;
  font-size: 9px;
  color: #fff;
  margin: 0 3px;
  display: inline-block;
  background-color: #000;
  border-radius: 25px;
  text-align: center;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.form-content .other-links a i[class*=bi-facebook] {
  background-color: #3b5998;
}

.form-content .other-links a i[class*=bi-google] {
  background-color: #dd4b39;
}

.form-content .other-links a i[class*=bi-linkedin] {
  background-color: #007bb6;
}